import React, { Component } from "react";
import { connect } from "react-redux";
import { Result, List, WhiteSpace, Modal } from "antd-mobile";
import browserCookie from "browser-cookies";
import {logoutSubmit} from '../../redux/user.redux'
import {Redirect} from 'react-router-dom'

@connect(
  state => state.user,
  { logoutSubmit }
)
class User extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }
  logout() {
    const alert = Modal.alert;
    alert("注销", "确定退出登录么？", [
      { text: "Cancel", onPress: () => console.log("cancel") },
      {
        text: "Ok",
        onPress: () => {
          browserCookie.erase("userid");
          this.props.logoutSubmit();
        }
      }
    ]);
  }
  render() {
    const props = this.props;
    const Item = List.Item;
    const Brief = Item.Brief;
    console.log(props)
    return props.user ? (
      <div>
        <Result
          img={
            <img
              src={require(`../img/${props.avatar}.png`)}
              style={{ width: 50 }}
            />
          }
          title={props.user}
          message={props.type == "boss" ? props.company : null}
        />

        <List renderHeader={() => "简介"}>
          <Item multipleLine>
            {props.title}
            {props.desc.split("\n").map(v => (
              <Brief key={v}>{v}</Brief>
            ))}
            {props.money ? <Brief>薪资：{props.money}</Brief> : null}
          </Item>
        </List>
        <WhiteSpace />
        <List>
          <Item onClick={this.logout}>退出登录</Item>
        </List>
      </div>
    ) : <Redirect to={props.redirectTo}></Redirect>;
  }
}

export default User;
